<template>
	<div class="noticeDetail">
    <div class="header-wrap" style="background:none;" ref="showBG">
      <span class="header-wrap-left" @click="goback">
        <i class="iconback iconfont icon-fanhui"></i>
      </span>
      <span class="header-wrap-right">
      </span>
    </div>
    <div class="swiper">
      <!-- <img src="https://pic.qqtn.com/up/2019-5/15581455226281095.jpg" alt=""> -->
    </div>
    <div class="noticeDetail-exhibition">
      <div class="noticeDetail-tips">
        <span v-if="listData.title">{{listData.title}}</span>
        <span v-if="!listData.title">{{listData.intro}}</span>
      </div>
    </div>
      <div class="noticeDetail-describe interval">
        <span>发布时间</span>
        <span v-if="listData.send_time_text">{{listData.send_time_text}}</span>
      </div>
      <div class="noticeDetail-describe describe">
        <span>简述</span>
        <span v-if="listData.content" @click="getImageUrl($event)" v-html="listData.content"></span>
      </div>
	</div>
</template>
<script>
import api from '../../api/api.js'
import wx from 'weixin-js-sdk';
export default {
  data(){
    return{
      listData:[],
      imgUrls:[],
      newImglist: [],
      Id: '',
      dome: ''
    }
  },
  mounted () {
    window.addEventListener('scroll', this.handleScroll)
  },
  created(){
    this.getDetail()
  },
  beforeDestroy() {
    window.removeEventListener("scroll",this.handleScroll)
  },
  methods:{
    goback(){
        this.$router.go(-1)
    },    
    handleScroll () {
      var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
      if(scrollTop >= 200){
        this.$refs.showBG.style.background = '#57c5c6'
      }else{
        this.$refs.showBG.style.background = 'none'
      }
    },
    getDetail(){
      this.$toast.loading({
        duration: 0, // 持续展示 toast
        forbidClick: true,
        message: '加载中...',
      });
      this.Id = this.$route.query.id
      this.$get(api.NoticeListDetail,{
        params: {
          id:this.Id
        }
      })
      .then((response) => {
        if(response.data.code==1){
          this.listData = response.data.data
          this.$toast.clear();
        }
      })
      .catch((error) => {
        this.$toast.clear();
        console.log(error);
      });  
    },
    imageChange(){
      var imgs = document.getElementsByTagName('img');
        Object.keys(imgs).forEach(key => {
        this.newImglist[key] = imgs[key].src;
      });
    },
    getImageUrl(e){
      if(e.target.nodeName == 'IMG'){
        wx.previewImage({
          current: e.target.src,
          urls: this.newImglist
        })
      }
    },
  },
  components: {}
}
</script>
<style scoped>
.swiper{
  /* padding-top: .7rem; */
  width: 100%;
  height: 5rem;
  background: url('../../assets/images/defaultImg.jpg');
  background-size: 100% 100%; 
}
.noticeDetail{
  overflow: hidden;
}
.noticeDetail img{
  width: 100%;
  height: 100%;
}
.noticeDetail-tips{
  font-size: .35rem;
  font-weight: bold;
  color: #000;
}
.noticeDetail-tips span{
  display: block;
  height: auto;
}
.noticeDetail-tips span:nth-of-type(1){
  margin-top: .35rem
}
.parcel-Importance{
  margin: .3rem 0 .1rem 0;
  display: flex;
}
.noticeDetail-exhibition{
  margin: 0 .5rem;
}
.noticeDetail-describe{
  margin: 0 .5rem;
  font-size: .32rem;
  font-weight: bold;
  color: #000;
}
.describe{
  padding-bottom: .5rem;
}
.interval{
  margin: .2rem .5rem;
  font-size: .32rem;
}
.noticeDetail-describe span{
  display: block;
  margin: .2rem 0;
}
.noticeDetail-describe span:nth-of-type(2){
  font-size: .28rem;
  color: #57c5c6;
}
.iconback{
  color: #000;
}
</style>
